<template>
	<view class="wrap">
		<view class="btn-wrap">

			<view class="btn-msg" v-for="(item,index) in btnList" :key="index" @click="btnTag(index)"
				:class="btnIndex==index?'activeBtn':''">{{item}}</view>

		</view>
		<view class="index-coupon" v-if="btnIndex==0">
			<view class="index-coupon-view" v-for="(item,index) in orderInfo.orderInfoList" :key="index">
				<view class="index-coupon-msg" v-if="item.outProductType==0">
					<view class="index-coupon-msg-wrap" style="justify-content: space-between;">
						<view class="dis">
							<view class="index-coupon-msg-left">
								<image :src="item.image" mode=""></image>
							</view>

							<view class="index-coupon-msg-center">
								<view class="index-coupon-msg-center-up">{{item.storeName}}</view>
								<view class="index-coupon-msg-center-bom">
									{{item.takeDesc}}
								</view>
							</view>
						</view>

						<view class="index-coupon-msg-center">
							请输入提货数量：
							<uni-easyinput :min="0" :max="item.yieldNum" v-model="item.num" placeholder="请输入该产品提货数量" />
						</view>


					</view>

				</view>
				<!-- <view class="" v-else>
					暂无可提货的商品
				</view> -->
			</view>
		</view>
		<view class="index-coupon" v-if="btnIndex==1">
			<view class="index-coupon-view" v-for="(item,index) in orderInfo.orderInfoList" :key="index">
				<view class="index-coupon-msg" v-if="item.outProductType==7">
					<view class="index-coupon-msg-wrap" style="justify-content: space-between;">
						<view class="dis">
							<view class="index-coupon-msg-left">
								<image :src="item.image" mode=""></image>
							</view>

							<view class="index-coupon-msg-center">
								<view class="index-coupon-msg-center-up">{{item.storeName}}</view>
								<view class="index-coupon-msg-center-bom">
									{{item.yield}}
								</view>
							</view>
						</view>

						<view class="index-coupon-msg-center">
							请输入提货数量：
							<uni-easyinput :min="0" :max="item.yieldNum" v-model="item.num" placeholder="请输入该产品提货数量" />
						</view>


					</view>

				</view>
			<!-- 	<view class="" v-else>
					暂无可提货的餐饮
				</view> -->
			</view>
		</view>
		<view class="index-coupon" v-if="btnIndex==2">
			<view class="index-coupon-view" v-for="(item,index) in orderInfo.orderInfoList" :key="index">
				<view class="index-coupon-msg" v-if="item.outProductType==8">
					<view class="index-coupon-msg-wrap" style="justify-content: space-between;">
						<view class="dis">
							<view class="index-coupon-msg-left">
								<image :src="item.image" mode=""></image>
							</view>

							<view class="index-coupon-msg-center">
								<view class="index-coupon-msg-center-up">{{item.storeName}}</view>
								<view class="index-coupon-msg-center-bom">
									{{item.yield}}
								</view>
							</view>
						</view>

						<view class="index-coupon-msg-center">
							请输入提货数量：
							<uni-easyinput :min="0" :max="item.yieldNum" v-model="item.num" placeholder="请输入该产品提货数量" />
						</view>


					</view>

				</view>
				<!-- <view class="" v-else>
					暂无可提货的民宿
				</view> -->
			</view>
		</view>



		<view class="from" v-if="btnIndex==0">

			<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
				<uni-forms-item label="提货方式" :labelWidth='100'>
					<uni-data-checkbox v-model="baseFormData.shippingType" :localdata="sexs" />
				</uni-forms-item>
				<!-- <uni-forms-item label="提货数量" name="name" :labelWidth='100'>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入提货人" />
				</uni-forms-item> -->
				<!-- <uni-forms-item label="商家名称"  name="name" :labelWidth='100'>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item> -->
				<template v-if="baseFormData.shippingType==2">
					<uni-forms-item label="日期时间" :labelWidth='100'>
						<uni-datetime-picker type="datetime" :start="start" :end="end"
							v-model="baseFormData.takeTime" />
						<!-- <uni-datetime-picker type="takeTime" return-type="date" v-model="baseFormData.takeTime" /> -->
					</uni-forms-item>
					<uni-forms-item label="提货人" name="name" :labelWidth='100'>
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入提货人" />
					</uni-forms-item>
					<uni-forms-item label="提货手机号" name="phone" :labelWidth='100'>
						<uni-easyinput v-model="baseFormData.phone" placeholder="请输入手机号" />
					</uni-forms-item>
					<view class="yf flex" @click="goPage()">
						<view>
							自提点

							<view style="padding: 10rpx;" v-if="expressTypeData">{{expressTypeData.name}}
								{{expressTypeData.phone}}
							</view>

						</view>
						<view class="address_j">
							请选择自提点
							<image src="@/static/com/icon_more.png" mode=""></image>
						</view>
					</view>
				</template>
				<template v-if="baseFormData.shippingType==1">

					<view class="address flex" @tap="selectAddress" v-if="addressList.realName!=''">
						<image class="address_img" src="@/static/pagesA/icon_jfsc_dhcg.png" mode=""></image>

						<view class="address_main">
							<view>
								<text class="sjr_name">{{addressList.realName}}</text>
								<text class="sjr_phone">{{addressList.phone}}</text>
							</view>
							<view class="address_j">
								{{addressList.province||''}}{{addressList.city||''}}{{addressList.district||''}}{{addressList.detail||''}}
							</view>
						</view>

						<view>
							<image style="width: 30rpx;height: 30rpx;" src="@/static/com/icon_more.png" mode=""></image>

						</view>
					</view>
					<view class="address flex" @tap="selectAddress" v-else>
						<view class="no-address">
							+添加收货地址
						</view>

					</view>
					<view class="yf flex">
						<view>
							运费
						</view>
						<view class="address_j">{{totalPrice}}</view>
					</view>
				</template>




			</uni-forms>
			<view class="ding">

			</view>

		</view>
		<view class="footer">
			<view class="footer-btn" @click="submit">
				提交
			</view>

		</view>
		<payment :payMode='payMode' :pay_close="pay_close" :types="scene" @onChangeFun='onChangeFun' :order_id="orderNo"
			:totalPrice='allPrice'></payment>
	</view>
</template>

<script>
	import {

		getUserInfo,

	} from "@/api/user";
	import payment from '@/components/payment';
	import {
		getAtake,
		getAtakeFreightFee
	} from '@/api/togeterRich/order.js'
	import {
		getOrderDetail,
		orderTake,
		orderDel,
		orderCancel,
		qrcodeApi
	} from '@/api/order.js';
	export default {
		components: {
			payment
		},
		data() {
			return {
				btnIndex: 0,
				btnList: ['提货商品', '提货餐饮', '提货民宿'],
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					},
				],
				pay_close: false,
				pay_order_id: '',
				totalPrice: 0,
				start: Date.now() - 10 * 24 * 3600000,
				end: Date.now() + 10 * 24 * 3600000,

				addressList: {
					realName: ''
				},
				expressTypeData: {
					name: '',
					phone: ''
				},
				orderInfo: {
					systemStore: {},
					pstatus: {}
				}, //订单详情
				baseFormData: {
					name: '',
					phone: '',
					shippingType: 2,
					storeId: '',
					takeTime: '',
					addressId: ''
				},
				sexs: [{
						text: '到店自提',
						value: 2
					},
					{
						text: '快递发货',
						value: 1
					},
				],
				orderNo: '',
				scene: '',
				order_id: ''
			}
		},
		onLoad(e) {
			console.log(e, 'eee')
			this.order_id = e.order_id

			this.getOrderInfo();
			this.init()
		},
		methods: {
			btnTag(index) {
				this.btnIndex = index
				this.getOrderInfo();
				return;
				if (this.btnIndex == 1) {
					let data = {
						id: this.id
					}
					getAdoptionqueryAll(data).then(res => {
						// console.log(res, 'jjjjj')
						this.allPcList = res.data
						this.allPcList.map(reee => {

							this.$set(reee, 'num', null)

						})
					})
				} else {
					this.orderInfoList = []
				}
			},
			init() {
				getUserInfo().then(res => {
					this.payMode[1].number = res.data.nowMoney
				})
			},
			// 支付
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 打开支付组件
			 * 
			 */
			pay_open: function() {
				this.pay_close = true;
				this.pay_order_id = this.orderInfo.orderId;
				// this.totalPrice = this.orderInfo.payPrice;
			},
			/**
			 * 支付成功回调
			 * 
			 */
			pay_complete: function() {
				this.pay_close = false;
				this.pay_order_id = '';
				this.getOrderInfo();
			},
			/**
			 * 支付失败回调
			 * 
			 */
			pay_fail: function() {
				this.pay_close = false;
				this.pay_order_id = '';
			},

			getOrderInfo: function() {
				let that = this;
				uni.showLoading({
					title: "正在加载中"
				});
				getOrderDetail(that.order_id).then(res => {
					console.log(res, '是不是成功的数据')
					uni.hideLoading();
					that.$set(that, 'orderInfo', res.data);
					if (that.orderInfo.orderInfoList && that.orderInfo.orderInfoList.length != 0) {
						that.orderInfo.orderInfoList.map(reffs => {
							that.$set(reffs, 'num', 0)
							// console.log(res, '我是？')
						})
					}


					console.log(that.orderInfo, 'orderInfo')
					that.$set(that, 'evaluate', res.data.status == 2 ? 2 : 0);
					that.$set(that, 'system_store', res.data.systemStore);
					that.$set(that, 'id', res.data.id);
					that.$set(that, 'cartInfo', res.data.orderInfoList);
					if (res.data.refundStatus != 0) {
						that.isGoodsReturn = true;
					};
					if (that.orderInfo.shippingType == 2 && that.orderInfo.paid) that.markCode(res.data
						.verifyCode);
					if (that.orderInfo.refundStatus > 0) {
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: '#666666'
						})
					}
				})
			},
			goPage() {
				uni.navigateTo({

					url: '/pages/users/goods_details_store/index?type=1'
					// url: '/pagesA/ruralShoppingMall/selfPickUpSite'
				})
			},
			selectAddress() {
				uni.navigateTo({
					url: '/pages/users/user_address_list/index?pageType=pointPage'
				})
			},
			modu(tit, content, confirmText1, cancelText1) {
				console.log(tit, content, confirmText1, cancelText1)
				uni.showModal({
					title: tit,
					content: content,
					confirmText: "查看详情", //这块是确定按钮的文字
					cancelText: "返回列表", //这块是取消的文字

					success: function(res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
						} else if (res.cancel) {
							uni.navigateBack({
								delta: 2, //返回层数，2则上上页
							})
						}
					}
				});

			},
			submit(ref) {
				let sp = []
				let cy = []
				let that = this
				let proList = []
				let d = {}
				this.orderInfo.orderInfoList.map(res => {
					if (this.btnIndex == 0) {
						if (res.num != 0) {
							d = {
								"id": res.productId,
								"num": res.num
							}
							proList.push(d)
						}

					} else if (this.btnIndex == 1) {
						if (res.num != 0) {
							d = {
								"id": res.productId,
								"num": res.num
							}
							proList.push(d)
						}
						
					} else if (this.btnIndex == 2) {
						if (res.num != 0) {
							d = {
								"id": res.productId,
								"num": res.num
							}
							proList.push(d)
						}
					}


				})
				if(proList.length==0){
					uni.showToast({
						title:"未输入数量或者该提货没有商品,请重新选择或输入",
						icon:'none',
						duration:2000
					})
					return;
				}
				// if (this.baseFormData.shippingType == 2) {
				this.baseFormData.id = this.orderInfo.id
				this.baseFormData.productRequestList = proList
				this.baseFormData.storeId = this.expressTypeData.id
				this.baseFormData.addressId = this.addressList.id || ''
				this.getType(this.baseFormData)
				// this.getOrderInfo();
				// } else {
				// 	console.log(proList, 'proListproList')
				// 	this.getType(proList)
				// }
				// console.log(this.baseFormData, 'chuan ')
				// console.log(data, '要穿的数据')
				// return;
				// this.modu("提货申请成功", "请按约定时间到店提货", "查看提货订单详情", "返回订单列表")


			},
			onChangeFun(e) {

				let that = this
				that.modu("申请成功", "我们将准时为您送到")

			},
			getPrice(proList) {
				console.log(proList, 'proList')
				let data = {}
				data.shippingType = this.baseFormData.shippingType
				data.id = this.orderInfo.id
				data.productRequestList = proList
				data.addressId = this.addressList.id || ''

				getAtakeFreightFee(data).then(res => {
					this.totalPrice = res.data
					console.log(res, '计算的价格')
					// return;
					this.pay_open()
				})
			},
			getType(data) {
				let that = this
				getAtake(data).then(res => {
					console.log(res, 'jjj', data)
					this.orderNo = res.data.orderNo
					this.scene = res.data.scene
					if (this.baseFormData.shippingType == 1) {
						this.getPrice(data.productRequestList)
					} else {
						that.modu("申请成功", "请按约定时间到店提货")
					}
					// this.pay_open()if()
					// return;

					return;

				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.btn-wrap {
		width: 100%;
		// margin: 0 auto;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		.btn-msg {
			border-radius: 100rpx;
			width: 30%;
			text-align: center;
			background: #fff;
			padding: 20rpx;
			border: 1rpx solid #333;
		}
	}

	.activeBtn {
		color: #fff;
		border: 1rpx solid $maincolor !important;
		background: $maincolor !important;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;

		z-index: 1;
		padding: 30rpx 0;

		.footer-btn {
			width: 90%;
			margin: 0 auto;
			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
		}
	}

	.yf {
		justify-content: space-between;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.address {
		border-radius: 12rpx;
		margin: 15rpx 0;
		padding: 51rpx 21rpx;
		background-color: #fff;
		box-sizing: border-box;

		.no-address {
			padding: 6rpx 20rpx;
			background: $maincolor;
			padding: 30rpx 100rpx;

			margin: 0 auto;
			border-radius: 100rpx;
			color: #fff;
		}

		.address_img {
			width: 60rpx;
			height: 60rpx;
		}

		.address_main {
			flex: 1;
			margin: 0 50rpx 0 25rpx;

			.sjr_name {
				font-size: 28rpx;
				margin-right: 11rpx;
			}

			.sjr_phone {
				color: #999;
			}

			.address_j {
				margin-top: 16rpx;
				font-size: 22rpx;
			}
		}

		.icon-youjiantou1 {
			font-size: 24rpx;
			color: #999;
		}
	}

	.wrap {
		background: #fff;
	}

	.from {
		width: 90%;
		margin: 0 auto;
		background: #fff;
	}

	.index-coupon {
		width: 100%;
		/* height: 200rpx; */
		background: #fff;
		padding: 20rpx 0;

		.index-coupon-view {
			// width: 80%;
			margin: 20rpx auto;

		}

		.index-coupon-msg {
			background-size: 100% 100%;
			border-radius: 10rpx;

			padding: 0 25rpx;
			border: 2rpx solid #d1d1d1;
			margin: 10px;


			.index-coupon-msg-wrap {
				display: flex;
				padding: 20rpx 0;
				align-items: center;

				.index-coupon-msg-bom {
					width: 30rpx;
					font-size: 28rpx;
					color: $maincolor;
					padding: 10rpx 0;
					writing-mode: vertical-lr;
					/*从左向右 从右向左是 writing-mode: vertical-rl;*/
					writing-mode: tb-lr;
					/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
				}

				.index-coupon-msg-center {
					margin-left: 20rpx;
					font-size: 28rpx;
					// text-align: center;
					color: #333;

					.index-coupon-msg-center-up {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						width: 220rpx;
					}

					.index-coupon-msg-center-bom {

						opacity: 1;

						margin-top: 20rpx;

					}
				}

				.index-coupon-msg-left {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}
	}
</style>